<template>
	<div class="confirm">
		<ul class="nav">
			<li :class="{checked: menuIndex == index}" @click='sendAjax(index)' v-for="(item,index) in menu" :key="index">{{ item }}</li>
		</ul>

		<div class="limitW" :style='{width:width + "px"}'>
			<table class="content">
				<tr><th>状态</th><th>流水号</th><th>钱包类型</th><th>数量</th><th>市值</th></tr>
				<tr v-for="(item,index) in data" :key='index' @click='isJump(item)'>
					<td>{{ item.status | TXLStatus }}</td>
					<td>{{ item.depute_code }}</td>
					<td>{{ item.transform_wallet | walletType }}</td>
					<td>{{ item.trade_num }}</td>
					<td>{{ item.price }}</td>
				</tr>
			</table>
		</div>
		<router-view />
	</div>
</template>

<script>
import { complateTrade, complateTradeSellerOut } from '../../../../config/getData.js'

export default {
	data(){
		return {
			menu:['买方交易确认','卖方交易确认'],
			menuIndex:0,
			detaShow:true,
			data:[],
			width:-1,
		}
	},
	methods:{
		isJump(item){
			// if(item.status == 2 || item.status == 3 || item.status == 12){
			this.$router.push("delegate/confirmDeta/" + item.id + '/' + item.status)
			// }
		},
		initData(){
			//请求数据
			if(this.menuIndex === 0){
				complateTrade().then( res => {
					this.data = res.data.data

				})
			}else if(this.menuIndex === 1){
				complateTradeSellerOut().then( res => {
					this.data = res.data.data

				})
			}
		},
		sendAjax(index){
			this.menuIndex = index
			this.initData()
		}
	},
	created(){
		//设置宽度
		this.width = document.documentElement.offsetWidth
		this.initData();
	},
	components:{
	}
}

window.addEventListener('resize', function(e){
	// console.log(document.documentElement.offsetWidth)
})
</script>

<style lang="scss" scoped>
.limitW{overflow-x: auto;
	table{width:400px;}
	table tr td:nth-of-type(3){color:red;}
}

.confirm{
	.nav{display: flex;margin-top:10px;
		li{width:120px;line-height: 36px;text-align: center;}
		li.checked{color:#e86e50;background-color: white;}
	}
}

@media screen and (min-width: 400px) {
     .limitW{width:100% !important;}
     .limitW table{width:100% !important;}

}
</style>
